<template>
    <div>
      
      <!-- 面包屑 -->
  <el-breadcrumb separator-class="el-icon-arrow-right">
  <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
  <el-breadcrumb-item>商品管理</el-breadcrumb-item>
  <el-breadcrumb-item>参数列表</el-breadcrumb-item>
</el-breadcrumb>
<!-- 卡片视图区 -->
     <el-card>
<!-- 头部警告区 -->
     <el-alert
    :closable="false"
    show-icon
    title="注意：只允许为第三级分类设置相关参数"
    type="warning">
  </el-alert>
 
 <!-- 选择商品分类区 -->
 <el-row class="cat_opt">
  <el-col>
     <span>选择商品分类:</span>
     <!-- 选择框 -->
 <el-cascader
    v-model="selectedKeys"
    :options="cateList"
    :props="cateProps"
    @change="handleChange"
     ></el-cascader>
  </el-col>

 </el-row>

<!-- 标签页 -->
  <el-tabs v-model="activeName" @tab-click="handleClick">
  <!-- 动态参数 -->
    <el-tab-pane label="动态参数" name="many">
      
       <el-button type="primary"  :disabled="isBtnDisabled" size="mini"
        @click="addDialogVisible=true"
       >添加参数</el-button>
     

     <!-- 动态参数表格 -->
     <el-table :data="manyTableData" border stripe>
        <!-- 展开行 -->
  <el-table-column type="expand" >

          <template slot-scope="scope">
             <!-- 循环tag标签渲染 -->
      <el-tag v-for="(item,i) in  scope.row.attr_vals"
      :key="i"
      closable
      >  {{item}} </el-tag>


<!-- 输入文本框 -->
<el-input
  class="input-new-tag"
  v-if="scope.row.inputVisible"
  v-model="scope.row.inputValue"
  ref="saveTagInput"
  size="small"
  @keyup.enter.native="handleInputConfirm(scope.row)"
  @blur="handleInputConfirm(scope.row)"
>
</el-input>
<!-- 添加按钮 -->
<el-button v-else class="button-new-tag" size="small" @click="showInput(scope.row)">+ New Tag</el-button>


  </template>


  </el-table-column>

      <el-table-column type="index" label="#"></el-table-column>
      <el-table-column  prop="attr_name" label="参数名称"></el-table-column>
      <el-table-column label="操作">
         <template>
            <el-button type="primary" icon="el-icon-edit" size="mini">编辑</el-button>
        <el-button type="danger" icon="el-icon-delete" size="mini">删除</el-button>
        
         </template>


      </el-table-column>


     </el-table>
       </el-tab-pane>

<!-- 静态属性 -->
    <el-tab-pane label="静态属性" name="only">
   
      <el-button type="primary"  :disabled="isBtnDisabled" size="mini"
   @click="addDialogVisible=true"
   >添加属性</el-button>

         <!-- 静态参数表格 -->
     <el-table :data="onlyTableData" border stripe>
  <el-table-column type="expand" >
 


  </el-table-column>

      <el-table-column type="index" label="#"></el-table-column>
      <el-table-column  prop="attr_name" label="属性名称"></el-table-column>
      <el-table-column label="操作">
         <template>
            <el-button type="primary" icon="el-icon-edit" 
            size="mini"  >编辑</el-button>
        <el-button type="danger" icon="el-icon-delete" 
        
        size="mini">删除</el-button>
        
         </template>


      </el-table-column>


     </el-table>
       </el-tab-pane>
  </el-tabs>


     </el-card>
<!-- 添加参数对话框 -->
<el-dialog
  :title="'添加'+ titleText"
  :visible.sync="addDialogVisible"
  width="50%"
 @close="addDialogClosed"
  >


  <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" 
  label-width="100px" >
 
 
  <el-form-item :label="titleText" prop="attr_name">
    <el-input v-model="addForm.attr_name"></el-input>
  </el-form-item>
  </el-form>


  <span slot="footer" >
    <el-button @click="addDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="addParams">确 定</el-button>
  </span>
</el-dialog>

<!-- 修改参数对话框 -->



    </div>
</template>
<script>
 export default{
    data(){
       return{
         //  商品分类列表

      cateList:[],

      // 级联选择框

      cateProps:{
       value:'cat_id',
       label:'cat_name',
       children:'children',
       expandTrigger: 'hover',
      },
      selectedKeys:[],
      // 被激活页签的名称
      activeName:'many',
      // 静态和动态数据
      manyTableData:[],

      onlyTableData:[],

      addDialogVisible:false,

      addForm:{
         attr_name:''
      },

      addFormRules:{
         attr_name:[
    { required: true, message: '请输入参数名称', trigger: 'blur' },
    
         ]
      },



       }
       
    },

    
   created(){
    this.getCateList()
   },

  methods:{
   async   getCateList(){
             
             const {data:res} = await this.$http.get('categories')
            if(res.meta.status!==200){
               return this.$message.error('获取失败！！')
            }
           this.cateList = res.data 
  },


  handleChange(){
   //   若果不是选的三级分类
  if(this.selectedKeys.length!==3)
  {
     this.selectedKeys = []
     return
  }
      this.getParamsData()

  },
  handleClick(){
      console.log(this.activeName)
      this.getParamsData()
  },



//   获取参数的列表数据
  async  getParamsData(){
         //  根据所选分类id和当前所属面板获取对应参数
  const {data:res} = await   this.$http.get(`categories/${this.cataId}/attributes`,{
            params:{sel: this.activeName}
         })
         if(res.meta.status!==200)
         {
            this.$message.error('获取参数列表失败！')
         }
     

// 字符串分割为数组

      res.data.forEach(item => {
      item.attr_vals =  item.attr_vals?item.attr_vals.split(',') :[]
   //   控制文本框的显示与隐藏
   // 自己控制本行的inupt
   item.inputVisible = false

   item.inputValue = ''
    
    })

 console.log(res.data); 

      if(this.activeName==='many'){
         this.manyTableData = res.data
      }else{
         this.onlyTableData = res.data
      }
         
  },

//   对话关闭事件
  addDialogClosed(){
           this.$refs.addFormRef.resetFields()
  },
//   添加参数
  addParams(){
     this.$refs.addFormRef.validate( async valid =>{
 
          if(!valid) return

          const {data:res} = await this.$http.post(`categories/${this.cataId}/attributes`,{
             attr_name:this.addForm.attr_name,
             attr_sel:this.activeName
          })

          if(res.meta.status!==201)
          {
                return this.$message.error('添加参数失败！！')
          }
           
         this.$message.success('添加参数成功!')
         this.addDialogVisible = false
            this.getCateList()
            
     })
  },
// 文本框失去焦点或者按下enter都会触发
     handleInputConfirm(row){
// 如果输入空字符，那么没有用
        if(row.inputValue.trim().length===0){
           row.inputValue=''

            row.inputVisible=false

            return
        }
       
       row.attr_vals.push(row.inputValue.trim())
       row.inputValue=''
        row.inputVisible=false

        
             
     },
// 点击按钮展示文本输入框
     showInput(row){
         row.inputVisible=true
         // 让文本框自动获取焦点


         // $nextTick这个就是当页面元素重新渲染后再执行，之后才调用函数
       this.$nextTick( () => {
         //  console.log(e);
          this.$refs.saveTagInput.$refs.input.focus();
        });
     }


 
  },
  computed:{
   //   若果按钮需要被禁用 返回true 反之
     isBtnDisabled(){
        if(this.selectedKeys.length===3)
        {
           return false
        }
        return true
     },
     cataId(){
        if(this.selectedKeys.length===3)
        {
           return this.selectedKeys[2]
        }
        return null   
     },

     titleText(){
        if(this.activeName==='many')
        {
           return '动态参数'
        }
        return '静态参数'
     }

  }

 }
</script>
<style lang='less' scoped>
.cat_opt{
   margin:15px 0;
}
.el-cascader{
   margin-left: 15px;
}
.el-tag{
   margin: 5px;
}
.input-new-tag{
   width: 120px;
}
</style>